import 'package:flutter/material.dart';

class MyApp17 extends StatelessWidget {
  const MyApp17({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView组件的使用'),
        backgroundColor: Colors.red,
      ),
      body: GridView(
        padding: const EdgeInsets.all(10),
        // 网格布局代理:横向展示限制的个数
        // gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        //     crossAxisCount: 4, //设置横向的个数
        //     mainAxisSpacing: 10, //设置主轴的间隔
        //     crossAxisSpacing: 10, //设置交叉轴的间隔
        //     childAspectRatio: 4 / 3 //设置子组件的宽高比
        //     ),

        // 网格布局代理:横向展示不限制个数,只设置元素宽度
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 100,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 4 / 3),
        children: [
          Container(color: Colors.red, child: const Text('我是第一个')),
          Container(color: Colors.yellow, child: const Text('我是第二个')),
          Container(color: Colors.blue, child: const Text('我是第三个')),
          Container(color: Colors.green, child: const Text('我是第四个')),
          Container(color: Colors.orange, child: const Text('我是第五个')),
          Container(color: Colors.purple, child: const Text('我是第六个')),
        ],
      ),
    );
  }
}
